import {Card, List, Tag} from "antd";
import useMessage from "@/hooks/getMessages.js";

const Message = () => {
    const {messageList} = useMessage()
    // 获取token
    const {username} = JSON.parse(localStorage.getItem('admin'))
    return (
        <div>
            <Card
                style={{width: '100%', height: 620}}>
                <List
                    itemLayout="horizontal"
                    dataSource={messageList}
                    bordered
                    split
                    renderItem={(item, index) => (
                        <List.Item>
                            <List.Item.Meta
                                title={
                                    <b style={{marginRight: 20, color: '#23abf2'}}> @{username ? username : '游客'}</b>
                                }
                                description={
                                    <div>
                                        <p>{item.content}</p>
                                        <div>
                                            <Tag color={'blue'}>{item.time}</Tag>
                                        </div>
                                    </div>
                                }
                            />
                        </List.Item>
                    )}
                />
            </Card>
        </div>
    )
}

export default Message